@import "reset";
@import "scss_common";
@import "css_common";
body{
  background:url($root +"bg.jpg") no-repeat center top;
  background-attachment:fixed;
  -webkit-background-size:cover; background-size:cover;

}
header{
  width:1000px;
  margin:36px auto 0;
  .top_bar{
    float:left;
    height:100px;
    position:absolute;
    background-color:#0e4553;
    color:#fff100;
    width:240px;
    top:36px;
    font-size:40px;
  }
  .left_bar{ left:0;
    padding-left:32px;
  }
  .right_bar{ right:0;
    padding-right:32px;
    text-align:right;
  }
  .white_font{
    color:#fff;
  }
  .fz16{ font-size:16px;}
  .fz21{ font-size:21px;}
  nav{
    background-color:#0e4553;
    width:100%;
    height:100px;;
    margin:0 auto;
    text-align:center;
    color:#fff;
    font-size:48px;
    line-height:100px;
  }
}

.container{
  width:1440px;
  margin:50px auto 0;
  overflow:hidden;
}

.cjkb,.qykb{
  color:#fff;
  font-size:32px;
  table{
    line-height:100%;
    th{
      background-color:#114855;
      text-align:center;
    }
    .th1{
      width:80px;
      height:80px;
      font-size:16px;
    }
    .th2{
      width:16px;
      background:none;
    }
    .space td{
      background:none;
      height:16px;
    }
    td{ text-align:center;background-color:#114855; color:#89ffdc;
      div{
        border-bottom:1px solid #0c6263;
        padding:20px 7px 10px;
        p{
          margin-bottom:-10px;
        }
      }
    }
    .td1{
      padding:0 8px; color:#fff;
    }
    .td2{
      width:16px; background:none;
    }
    .sub_txt{
      font-size:13px;
    }
    .fz18{
      font-size:18px;
    }
  }
  .day,.month{
    width:700px;
    height:380px;
    margin-top:26px;
    margin-bottom:60px;
  }
  .day{ float:left;}
  .month{ float:right;}
}
.qykb{
  .table_wrap{
    width:1100px;
    height:491px;
    float:left;
  }
  .right_box{
    width:300px;
    height:491px;
    float:right;
  }
  .ele{
    width:300px;
    height:240px;
  }
  .total{
    width:300px;
    height:240px;
    margin-top:20px;
  }
  table{}
}
.qykb1_title p{
  position:relative;
  line-height:100px;
}


.qykb2{
  .box{
    width:700px;
    height:733px;
    color:#fff;

    .top{
      background:#114855;
      height:330px;
      padding-top:45px;
      th{
        text-align:center;
        font-size:24px;
      }
      td{
        text-align:center;
        padding:35px 0;

      }
      p{ font-size:24px;}
      .circle{
        margin:0 auto;
        width:175px;
        height:175px;
        border:6px solid #00b7ee;
        -webkit-border-radius:50%; -moz-border-radius:50%; border-radius:50%;
        position:relative;
        text-align:center;
        .value{
          font-size:54px;
          line-height:155px;
        }
        .unit{
          position:absolute;
          left:63px;
          bottom:30px;
          font-size:18px;
          color:#00b7ee;
        }

        .ycl{
          left:47px;
        }

        .icon{
          width:26px;
          height:32px;

          position:absolute;
          left:69px;
          bottom:20px;
        }
        .down_icon{
          background:url('../images/down.png') no-repeat;
        }
        .up_icon{
          background:url('../images/up.png') no-repeat;
        }
      }
      .green_circle{
        border-color:#5fb9a1;

      }
      .red_circle{
        border-color:#e5004f;
      }
    }
    .down{
      margin-top:28px;
      height:350px;
      background:#114855;
    }
  }
  .left{
    float:left;

  }
  .right{
    float:right;

  }
}




@media (max-width:1440px){
  header{
    width:650px;
    nav{

      font-size:30px;
    }
    .top_bar{
      width:200px;
      font-size:36px;
    }
    .fz16{ font-size:14px;}
    .fz21{ font-size:18px;}
  }

  .container{
    width:1200px;
    padding-bottom:50px;
  }
  .cjkb{
    .day,.month{
      width:590px;
    }
  }
  .qykb .table_wrap{
    width:850px;
  }
  .qykb2 .box {
    width: 580px;

  }
}

@media (max-width:1024px){
  header{
    width:500px;
    nav{
      font-size:25px;
    }
    .inner{
      padding-top:20px;
    }
    .top_bar{
      width:150px;
      font-size:21px;
    }
    .left_bar{ padding-left:10px;}
    .right_bar{ padding-right:10px;}
    .fz16{ font-size:12px;}
    .fz21{ font-size:16px;}
  }
  .container{
    width:768px;
  }
  .cjkb{
    .day,.month{
      width:100%;
    }
  }

}

@media (max-width:980px){
  header{
    width:500px;
    nav{
      font-size:18px;
    }
    .top_bar{
      width:150px;
      font-size:16px;
      .inner{
        padding-top:30px;
      }
      .qykb1_title{
        padding-top:0;
      }
    }
    .right_bar{ padding-right:10px;}
    .fz16{ font-size:12px;}
    .fz21{ font-size:14px;}
  }
  .container{
    width:100%;
  }
  .qykb .table_wrap{
    width:100%;
  }
  .qykb .right_box{
    width:100%;
  }
  #ele{
    width:100%;
    margin-top:20px;
  }
  #total{
    width:100%;
    margin-top:20px;
  }

  .qykb2 .box{
    width:100%;
  }
}

